<?php //$this->Html->meta("keywords", $article['Article']['meta_key'], array("inline" => false));?>
<?php //$this->Html->meta("description", $article['Article']['meta_desc'], array("inline" => false));?>
<?php $this->Html->css('/css/products', array("inline" => false));?>
<?php echo $this->element('sub_menu'); ?>
  <div class="container mt-10 pt-30 pb-50 detail-page">
    <div id="Side" class="col-sm-4 col-md-4">
      <h2 class="title-category">Callebaut</h2>
      <ul class="right-menu mb-50">
		<?php 
		foreach($categoryList as $key=>$category) : 
			if($key%2==0) $class ='class="odd"';
			else $class ='class="even"';
		?>
        <li <?php echo $class;?>>
			<!--<a href="/products/category/<?php echo $category['ProductCategory']['id'];?>">
				<?php echo $category['ProductCategory']['category_name' . $code];?>
			</a>-->
            <?php echo $this->Html->link( $category['ProductCategory']['category_name' . $code], array(
                'controller' => 'products',
                'action' => 'category',
                'id' => $category['ProductCategory']['id'],
                'slug' => str_replace(' ', '-', $category['ProductCategory']['category_name_en'])
            ));
            ?>
		</li>
		<?php endforeach;?>
      </ul><!-- /right-menu -->

      <?php echo $this->element('video');?>
    </div><!-- /#Side -->

    <div id="Main" class="col-sm-8 col-md-8">
      <div class="row">
        <div class="col-sm-6 col-md-6 cf">
          <div class="image-block product-image">
            <div class="product-image-large"></div>
            <img src="/files/images/<?php echo $product['Product']['image']?>" alt="<?php echo $product['Product']['name' . $code]?>" class="product-image-small img-responsive">
          </div>
        </div>
        <div class="col-sm-6 col-md-6">
          <div class="info-detail">
            <h3 class="title-h3-01"><?php echo $product['Product']['name' . $code]?></h3>
            <p class="mt-10 mb-7 text-04"><?php echo nl2br($product['Product']['description' . $code]);?></p>
            <?php if($product['Product']['code']):?>
                <p class="mb-7 text-04"><strong class="mr-20">Product code:</strong> <?php echo $product['Product']['code']?></p>
            <?php endif;?>
            <a href="/contacts" class="btn-contact over4 mt-40">contact us</a>
          </div>
          
        </div>
      </div>
		<br />
      <div class="row">
        <div class="col-md-12">
          <div class="table-responsive">
          <?php if(count($product['ProductDetail'])):?>
            <table class="table table-bordered table-product">
              <thead>
                <tr>
                  <th>Description</th>
                  <th>Code</th>
                  <th>% Cocoa solids</th>
                  <th>Packaging</th>
                </tr>
              </thead>
              <tbody>
			  <?php 
			  foreach($product['ProductDetail'] as $key=>$detail):
					if($key % 2 == 0) $class ='class="odd"';
					else $class ='class="even"';
			  ?>
                <tr <?php echo $class;?>>
                  <td><?php echo $detail['description'. $code];?></td>
                  <td><?php echo $detail['code'. $code];?></td>
                  <td align="center"><?php echo $detail['cocoa_solids'. $code];?></td>
                  <td align="center"><?php echo $detail['packaging'. $code];?></td>
                </tr>
				<?php endforeach;?>
              </tbody>
            </table>
            <?php endif;?>
          </div>
        </div>
      </div>
    </div><!-- /#Main -->
<!--
    <div class="row recipe-block clear">
      <div class="col-md-12">
        <h3 class="title-h3-01 ml-15">Recipes</h3>

        <div class="recipe-box">
          <img src="/images/recipes/img_recipe_01.jpg" alt="" class="img-responsive" />
          <img src="/images/recipes/img_start_02.png" alt="" class="img-star" />
          <h4 class="title-recipe"><a href="#">VALENTINE CUPCAKE</a></h4>
        </div>

        <div class="recipe-box">
          <img src="/images/recipes/img_recipe_02.jpg" alt="" class="img-responsive" />
          <img src="/images/recipes/img_start_01.png" alt="" class="img-star" />
          <h4 class="title-recipe"><a href="#">SWEET CHOCOLATE WHOO..</a></h4>
        </div>

        <div class="recipe-box">
          <img src="/images/recipes/img_recipe_03.jpg" alt="" class="img-responsive" />
          <img src="/images/recipes/img_start_04.png" alt="" class="img-star" />
          <h4 class="title-recipe"><a href="#">DARK ORANGE</a></h4>
        </div>

        <div class="recipe-box">
          <img src="/images/recipes/img_recipe_04.jpg" alt="" class="img-responsive" />
          <img src="/images/recipes/img_start_02.png" alt="" class="img-star" />
          <h4 class="title-recipe"><a href="#">PRIMAVERA</a></h4>
        </div>

        <div class="recipe-box">
          <img src="/images/recipes/img_recipe_03.jpg" alt="" class="img-responsive" />
          <img src="/images/recipes/img_start_03.png" alt="" class="img-star" />
          <h4 class="title-recipe"><a href="#">PRIMAVERA</a></h4>
        </div>
      </div>
    </div>
-->
  </div><!-- /container -->

<script type="text/javascript" src="/js/Event.js"></script>
<script type="text/javascript" src="/js/Magnifier.js"></script>
<script type="text/javascript">
    // var evt = new Event(),
    // m = new Magnifier(evt);

    // m.attach({
    //   thumb: '#thumb',
    //   large: 'images/img_bigproduct_01.jpg',
    //   largeWrapper: 'preview'
    // });

    $(function() {
      var $productImage = $('.product-image');
      var $productImageSmall = $('.product-image-small');
      var $productImageLarge = $('.product-image-large');
      var nativeWidth = 0;
      var nativeHeight = 0;

      $productImage
        .mousemove(function(e) {
          var $self = $(this);

          if (!nativeWidth && !nativeHeight) {
            var img = new Image();
            img.src = $productImageSmall.attr('src');

            img.onload = function() {
              nativeWidth = img.width;
              nativeHeight = img.height;
            }
          } else {
            var offset = $self.offset();

            var mx = e.pageX - offset.left;
            var my = e.pageY - offset.top;

            if (mx < $self.width() && my < $self.height() && mx > 0 && my > 0) {
              $productImageLarge.show();
            } else {
              $productImageLarge.hide();
            }

            if ($productImageLarge.is(':visible')) {
              var rx = Math.round(mx / $productImageSmall.width() * nativeWidth - $productImageLarge.width() / 2) * -1;
              var ry = Math.round(my / $productImageSmall.height() * nativeHeight - $productImageLarge.height() / 2) * -1;
              var bgp = rx + 'px ' + ry + 'px';

              var px = mx - $productImageLarge.width() / 2;
              var py = my - $productImageLarge.height() / 2;

              $productImageLarge.css({
                'left': px,
                'top': py,
                'background': 'url(' + $productImageSmall.attr('src') + ')',
                'background-position': bgp
              });
            }
          }
        })
        .mouseout(function(e) {
          $productImageLarge.hide();
        });
    });
</script>